import { Button, Space, Modal, Tooltip } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue';
import { createVNode, defineComponent } from 'vue';

export default defineComponent({
  props: {
    record: {
      type: Object,
      default: () => {
        return {};
      }
    },
    editCall: {
      type: Function,
      default: () => {}
    },
    deleteCall: {
      type: Function,
      default: () => {}
    }
  },
  emits: ['edit', 'delete'],
  setup(props, { emit }) {
    const handleEdit = (_arg: any) => {
      emit('edit', props.record);
    };
    const handleDelete = (_arg: any) => {
      Modal.confirm({
        title: '确定要删除数据？',
        centered: true,
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          emit('delete', props.record);
        }
      });
    };
    return {
      handleEdit,
      handleDelete
    };
  },
  render() {
    return (
      <Space size={2}>
        <Tooltip title="启动触发器">
          <Button
            size="small"
            type="dashed"
            icon={<PlayCircleOutlined />}
            onClick={() => {}}
          />
        </Tooltip>
        <Tooltip title="暂停触发器">
          <Button
            size="small"
            type="dashed"
            icon={<PauseCircleOutlined />}
            onClick={() => {}}
          />
        </Tooltip>
        <Tooltip title="编辑触发器">
          <Button
            size="small"
            type="dashed"
            icon={<EditOutlined />}
            onClick={() => {}}
          ></Button>
        </Tooltip>
        <Tooltip title="删除触发器">
          <Button
            size="small"
            type="dashed"
            danger
            icon={<DeleteOutlined />}
            onClick={() => {}}
          ></Button>
        </Tooltip>
      </Space>
    );
  }
});
